{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros.html" import apple_app_store_button, google_play_button with context %}

{% extends "firefox/base/base-protocol.html" %}

{% from "firefox/nothing-personal/includes/browser-macro.html" import browser_border %}

{% block site_css %}
  {% if ftl_file_is_active('navigation_refresh') and ftl_file_is_active('footer-refresh') %}
    {{ css_bundle('m24-root') }}
    {{ css_bundle('m24-navigation-and-footer') }}
  {% else %}
    {{ css_bundle('legacy-navigation-and-footer') }}
  {% endif %}
  {{ css_bundle('protocol-firefox') }}
{% endblock %}

{% block page_css %}
  {{ css_bundle('firefox-nothing-personal') }}
  {{ css_bundle('protocol-newsletter') }}
{% endblock %}

{% block page_title_prefix %}Firefox - Nothing Personal. Just Browsing.{% endblock %}
{% block page_title_suffix %}{% endblock %}

{% block page_image %}{{ static('img/firefox/nothing-personal/meta-img.png') }}{% endblock %}
{% block page_og_title %}Firefox. Nothing personal. Just browsing.{% endblock %}
{% block page_desc %}Firefox browser is fast, reliable and private. We really don’t need your personal data to help you get where you need to go online.{% endblock %}

{% block site_header %}{% endblock %}

{% set ios_url = 'https://apps.apple.com/us/app/firefox-private-safe-browser/id989804926?ppid=fb7ff70c-585e-4c32-bd90-f3abb0500d2a&ct=nothing-personal&mt=8' %}
{% set android_url = 'https://play.google.com/store/apps/details?id=org.mozilla.firefox&listing=nothing_personal&referrer=utm_source%3Dwww.mozilla.org%26utm_medium%3Dreferral%26utm_campaign%3Dnothing-personal' %}

{% set utm_params = 'utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=nothing-personal' %}

{% block content %}
  <header class="c-page-header">
    <div class="mzp-l-content c-page-header-inner">
      <h1 class="c-page-header-logo-fx">Firefox by Mozilla</h1>

      <div class="cta-group">
        <p>Feeling browser-curious? We won’t tell. <span aria-hidden="true">&gt;&gt;&gt;&gt;&gt;</span></p>

        <a href="https://blog.mozilla.org/en/firefox/" class="is-default mzp-c-button mzp-t-lg" data-cta-text="Learn more" data-cta-position="primary">Learn more</a>

        <a href="{{ url('firefox.set-as-default.thanks')}}" class="is-not-default mzp-c-button mzp-t-lg" data-cta-text="Set as default" data-cta-position="primary">Set as default</a>

        {{ download_firefox_thanks(alt_copy='Download Firefox', dom_id='protocol-nav-download-firefox', button_class='mzp-t-primary mzp-t-lg c-download-firefox-cta', download_location='primary') }}

        {{ apple_app_store_button(href=ios_url, class_name='app-store-badge') }}
        {{ google_play_button(href=android_url, class_name='play-store-badge') }}
      </div>
    </div>
  </header>
  <div class="c-content-layout">
    <main class="c-main">
      <section class="c-things">
        <div class="c-text-section mzp-l-content mzp-t-content-md mzp-t-content-nospace">
          <h2 class="c-text-title">Ok, we admit it: we’re fast, reliable <em class="u-text-uppercase">and</em> private.</h2>
          <p class="c-text-body">We don’t need to watch everything you do online to get you where you need to go.</p>
        </div>
        <div class="c-things-browser-fox-bush-container mzp-l-content mzp-t-content-md mzp-t-content-nospace">
           <div data-animation="pop-in" class="c-things-fox-bush">
            {{ picture(
              url='img/firefox/nothing-personal/thug-life.gif',
              sources=[
                {
                  'media': '(prefers-reduced-motion: reduce)',
                  'srcset': {
                    'img/firefox/nothing-personal/fox-bush.png': '1x',
                    'img/firefox/nothing-personal/fox-bush-high-res.png': '2x'
                  },
                  'sizes': {
                    'default': '138px'
                  }
                },
                {
                  'media': '(prefers-reduced-motion: no-preference)',
                  'srcset': {
                    'img/firefox/nothing-personal/fox-bush.gif': '200w'
                  },
                  'sizes': {
                    'default': '138px'
                  }
                }
              ],
              optional_attributes={
                  'height': '89',
                  'width': '138',
                  'class': 'c-things-fox-bush-image'
              }
            ) }}
           </div>
          {% call browser_border(class='c-things-browser', heading="What would Firefox do?") %}
            <img class="c-things-foxy-sticker" data-animation="dependent-pop-in" src="{{ static('img/firefox/nothing-personal/foxy-sticker.svg') }}" alt="">
            <h4 class="c-mono-title">Things we’d rather do than go through your private data</h4>
            <div id="things-list" class="c-things-list-container">
              <ul class="c-things-list mzp-u-list-styled">
                <li>Work out to elevator music</li>
                <li>Have a pigeon as a roommate</li>
                <li>Eat buffet oysters</li>
                <li>Sit next to a crying infant on a plane</li>
                <li>Reset password only to be told you can’t use your existing password</li>
              </ul>
              <details>
                <summary><h5>All the things!</h5></summary>
                <ul class="c-things-list mzp-u-list-styled">
                  <li>Get into a passionate debate with a bot in the comments</li>
                  <li>Sit in a waiting room with no signal AND no gossip magazines</li>
                  <li>Bare feet → Lego bricks</li>
                  <li>Floss (not the dance... but also the dance)</li>
                  <li>Lose an earbud on a long walk</li>
                  <li>Peel wet asparagus</li>
                  <li>Go to a wedding alone where we don’t know anyone</li>
                  <li>Fold a fitted sheet :( :( :(</li>
                  <li>Clean up hairballs from someone else’s cat</li>
                  <li>Detangle headphone cables</li>
                  <li>Assemble a dresser without the instructions</li>
                  <li>Paint toenails while holding brush in our teeth</li>
                  <li>Look for the end of the tape roll</li>
                  <li>Explain what memes are to Uncle Gary</li>
                  <li>Try to track down where a weird smell is coming from... and fail</li>
                  <li>Leave phone at home 😱</li>
                </ul>
              </details>
            </div>
            <div class="c-things-output-container" aria-live="polite">
              <p class="c-things-output" id="random-output"></p>
            </div>
            <div class="c-things-button-container">
              <button id="randomizer-button" data-cta-text="Clickity click!" type="button" class="c-things-button">
                <img class="c-things-button-sparkle-1" src="{{ static('img/firefox/nothing-personal/sparkle.svg') }}" alt="">
                <img class="c-things-button-sparkle-2" src="{{ static('img/firefox/nothing-personal/sparkle.svg') }}" alt="">
                <img class="c-things-button-sparkle-3" src="{{ static('img/firefox/nothing-personal/sparkle.svg') }}" alt="">
                <img src="{{ static('img/firefox/nothing-personal/clickity-text.svg') }}" alt="Clickity Click!">
              </button>
              <p><small class="c-things-note"><span aria-hidden="true">[</span>And keep clicking<span aria-hidden="true">]</span></small></p>
            </div>
            <img class="c-things-smiley-sticker" data-animation="dependent-pop-in" src="{{ static('img/firefox/nothing-personal/smiley-sticker.svg') }}" alt="">
            <img class="c-things-heart-sticker" data-animation="dependent-pop-in" src="{{ static('img/firefox/nothing-personal/heart-sticker.svg') }}" alt="">
          {% endcall %}
        </div>
      </section>
      <!-- things we'd rather do -->
      <section class="c-privacy">
        <div class="c-text-section mzp-l-content mzp-t-content-md mzp-t-content-nospace">
          <h2 class="c-text-title">The thing is, your privacy has always been our thing</h2>
          <p class="c-text-body">Experience the internet the way you want — without the data tradeoffs.</p>
        </div>
        <div class="c-grid mzp-l-content mzp-t-content-md mzp-t-content-nospace">
          {% call browser_border(class='c-privacy-default') %}
            <img class="c-privacy-image"src="{{ static('img/firefox/nothing-personal/privacy-default.svg') }}" alt="">            <!-- TODO, set max with to bump "by default" to second line -->
            <h3 class="c-mono-title">Your privacy is respected by default</h3>
            <p>No need to dig through your privacy settings — with Firefox <a href="{{ url('firefox.features.private') }}" target="_blank" data-link-text="your personal data is private by default">your personal data is private by default</a>.</p>
          {% endcall %}
          {% call browser_border() %}
            <img class="c-privacy-image" src="{{ static('img/firefox/nothing-personal/privacy-tracker.svg') }}" alt="">
            <h3 class="c-mono-title">Keep third-party trackers off your trail</h3>
            <p><a href="https://blog.mozilla.org/en/mozilla/firefox-rolls-out-total-cookie-protection-by-default-to-all-users-worldwide/?{{utm_params}}" target="_blank" data-link-text="We make it hard for cookies">We make it hard for cookies</a> and trackers to follow you around, so they can’t get data about you they definitely don’t need.</p>
          {% endcall %}
        </div>
      </section>
      <!-- privacy -->
      <section class="c-features">
        <div class="c-text-section mzp-l-content mzp-t-content-md mzp-t-content-nospace">
          <h2 class="c-text-title">Here’s why people dump their other browsers for us</h2>
        </div>
        <div class="c-grid mzp-l-content mzp-t-content-md mzp-t-content-nospace">
          <div class="c-feature-fast c-feature-box" data-animation="pop-in">
            <h3 class="c-feature-box-title c-mono-title mzp-u-title-2xs">
              <img class="c-feature-box-image" src="{{ static('img/firefox/nothing-personal/feature-fast.svg') }}" alt="">
              <span>We’re fast. Like, <em>really</em> fast.</span>
            </h3>
            <p>With Firefox, there’s no waiting around. Web pages and videos load in a flash, and <a href="{{ url('firefox.features.fast') }}" target="_blank" data-link-text="we’re getting faster every day">we’re getting faster every day.</a></p>
          </div>
          <div class="c-feature-box" data-animation="pop-in">
            <h3 class="c-feature-box-title c-mono-title mzp-u-title-2xs">
              <img class="c-feature-box-image" src="{{ static('img/firefox/nothing-personal/feature-reliable.svg') }}" alt="">
              <span>You can count on us</span>
            </h3>
            <p>We can handle all your tabs, streams, vision boards — whatever you need, we can hold it down.</p>
          </div>
          <div class="c-feature-box" data-animation="pop-in">
            <h3 class="c-feature-box-title c-mono-title mzp-u-title-2xs">
              <img class="c-feature-box-image" src="{{ static('img/firefox/nothing-personal/feature-following.svg') }}" alt="">
              <span>Features with a following</span>
            </h3>
            <p><a href="{{ url('firefox.features.index') }}" target="_blank" data-link-text="Our actually-useful features">Our actually-useful features</a> are kind of a big deal. Fan favorites include <a href="{{ url('firefox.features.picture-in-picture') }}" target="_blank" data-link-text="popping out videos">popping out videos</a> and a <a href="{{ url('firefox.features.pdf-editor') }}" target="_blank" data-link-text="popping out videos">built-in PDF editor</a>.</p>
          </div>
          <div class="c-feature-box c-feature-box-desktop-only" data-animation="pop-in">
            <h3 class="c-feature-box-title c-mono-title mzp-u-title-2xs">
              <img class="c-feature-box-image" src="{{ static('img/firefox/nothing-personal/feature-switch.svg') }}" alt="">
              <span>We make switching easy</span>
            </h3>
            <p>Bring over your browsing history, bookmarks, extensions and logins with just a few clicks.</p>
          </div>
        </div>
      </section>
      <!-- features -->
    <section>
      <div class="c-newsletter-gif-container mzp-l-content mzp-t-content-md mzp-t-content-nospace">
        <div data-animation="pop-in">
          <div class="c-thug-life-gif">
            {{ picture(
              url='img/firefox/nothing-personal/thug-life.gif',
              sources=[
                {
                  'media': '(prefers-reduced-motion: reduce)',
                  'srcset': {
                    'img/firefox/nothing-personal/thug-life-img.jpg': '200w'
                  },
                  'sizes': {
                    'default': '200px'
                  }
                },
                {
                  'media': '(prefers-reduced-motion: no-preference)',
                  'srcset': {
                    'img/firefox/nothing-personal/thug-life.gif': '200w'
                  },
                  'sizes': {
                    'default': '200px'
                  }
                }
              ],
              optional_attributes={
                  'height': '200',
                  'loading': 'lazy',
                  'width': '200'
              }
            ) }}
          </div>
        </div>
        {% call browser_border(id="newsletter-signup", class="c-newsletter", heading='Newsletter') %}
          <h4 class="c-mono-title"><span aria-hidden="true">[</span>Sign up for our newsletter<span aria-hidden="true">]</span></h4>

          {{ email_newsletter_form(
            include_title=False,
            include_language=False,
            include_country=False,
            newsletters='mozilla-and-you, nothing-personal-college-interest-waitlist',
            multi_opt_in_required=True
          )}}

          <p>By subscribing, you’ll receive Mozilla updates, plus exclusive college-related content if you opt in. You may unsubscribe from either at any time.</p>
        {% endcall %}
      </div>
      <div class="c-slide-in-container">
        <div class="c-sticky-note" data-animation="slide-in">
          <span aria-hidden="true">&gt;&gt;&gt;</span> {{ download_firefox_thanks(alt_copy='download', button_class='mzp-t-primary mzp-t-lg c-download-firefox-cta', download_location='secondary cta') }} <span aria-hidden="true"> &lt;&lt;&lt;&lt; </span>
          <br>
          <span aria-hidden="true">&gt;&gt;&gt;</span> {{ download_firefox_thanks(alt_copy='download', button_class='mzp-t-primary mzp-t-lg c-download-firefox-cta', download_location='secondary cta') }} <span aria-hidden="true"> &lt;&lt;&lt;&lt; </span>
          <br>
          <span aria-hidden="true">&gt;&gt;&gt;</span> {{ download_firefox_thanks(alt_copy='download', button_class='mzp-t-primary mzp-t-lg c-download-firefox-cta', download_location='secondary cta') }} <span aria-hidden="true"> &lt;&lt;&lt;&lt; </span>

          {{ apple_app_store_button(href=ios_url, class_name='app-store-badge') }}
          {{ google_play_button(href=android_url, class_name='play-store-badge') }}

          <p>Ok, bye.</p>
        </div>
      </div>
      <div class="c-sign-off">
        <div class="c-nothing-personal">
          <p>Nothing personal. Just browsing.</p>
          <div class="c-sign-off-wordmark">
            <img loading="lazy" src="{{ static('img/firefox/nothing-personal/firefox-by-mozilla-wordmark-white.svg') }}" alt="" width="180" height="40" class="c-header-logo">
          </div>
        </div>
      </div>
    </section>
    <!-- final CTAs -->
  </main>
  <aside class="c-aside">
    <a class="c-aside-link" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" aria-label="Link to a Youtube video" target="_blank" rel="external noopener" data-link-text="Folder"><img src="{{ static('img/firefox/nothing-personal/folder-icon.svg') }}" alt="">Folder <br> <.< </a>
    <a class="c-aside-link" href="https://open.spotify.com/playlist/0vvXsWCC9xrXsKd4FyS8kM" aria-label="Link to a Spotify playlist" target="_blank" rel="external noopener" data-link-text="Focus playlist"><img src="{{ static('img/firefox/nothing-personal/music-icon.svg') }}" alt="">focus <br> playlist</a>
    <a class="c-aside-link" href="https://www.youtube.com/watch?v=F-nFQryDB0s" aria-label="Introducing the new Firefox...jk. It's red pandas" target="_blank" rel="external noopener" data-link-text="MyLife">
      <img src="{{ static('img/firefox/nothing-personal/bin-icon.svg') }}" alt="">
      <span>MyLife</span>
    </a>
  </aside>
  </div>
{% endblock %}

{% block js %}
  {{ js_bundle('firefox-nothing-personal') }}
  {{ js_bundle('newsletter') }}
{% endblock %}
